<template>
  <div>

    <el-table style="width: 100%" :data="shopdata">
      <el-table-column prop="shopid" label="编号" width="100"></el-table-column>
      <el-table-column prop="shopname" label="商品名" width="180"></el-table-column>
      <el-table-column prop="shopimage" label="商品图" width="180"></el-table-column>
      <el-table-column prop="shopprice" label="价格" width="130"></el-table-column>
      <el-table-column prop="shoptype.shoptypename" label="类别" width="130"></el-table-column>
      <el-table-column prop="shopnum" label="数量" width="130"></el-table-column>
      <el-table-column prop="shopaddtime" label="添加时间" width="180"></el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button size="mini" @click="handleEdit(scope.row)">编辑</el-button>
          <el-button size="mini" type="danger" @click="handleDelete(scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- 弹窗-->
    <el-dialog title="商品维护" :visible.sync="dialogFormVisible" :append-to-body="true">
      <!-- 在el-dialog中进行嵌套el-form实现弹出表格的效果 -->
      <el-form>
        <el-form-item label="商品名" :label-width="formLabelWidth">
          <el-input v-model="shop.shopname" auto-complete="off"></el-input>
        </el-form-item>
        <el-form-item label="商品价格" :label-width="formLabelWidth">
          <el-input v-model="shop.shopprice" auto-complete="off"></el-input>
        </el-form-item>
        <el-form-item label="商品类别" :label-width="formLabelWidth">
          <el-select v-model="shop.shoptypeid" clearable placeholder="请选择" style="width: 100%;">
            <el-option v-for="item in shoptypedata" :key="item.shoptypeid" :label="item.shoptypename"
              :value="item.shoptypeid">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="商品图片" :label-width="formLabelWidth">
          <el-input v-model="shop.shopimg" auto-complete="off"></el-input>
        </el-form-item>
        <el-form-item label="商品介绍" :label-width="formLabelWidth">
          <el-input type="textarea" v-model="shop.shopmessage" auto-complete="off"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="cancel">取 消</el-button>
        <!-- 设置触发更新的方法 -->
        <el-button type="primary" @click="update">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
  var _this;
  export default {
    created() {
      _this = this;
      _this.showAll();
      _this.refresh();

    },
    props: {
      //子组件中设置一个必传参数,父组中通过属性操作v-bind传过来
      shopdata: {
        type: Array,
        required: true
      }
    },
    methods: {
      cancel() {
        this.shop.shopname = "",
          this.shop.shopprice = "",
          this.shop.shoptypid = "",
          this.shop.shopimg = "",
          this.shop.shopmessage = ""
        // 取消的时候直接设置对话框不可见即可
        this.dialogFormVisible = false;
      },
      refresh() {
        _this.$axios.post(
            "/shop/all", {}
          )
          .then(function(param) {
            _this.shopList = param.data
          })
          .catch(function(err) {
            console.log(err);
          })
      },
      showAll() {
        _this.$axios.post(
            "/shoptype/all", {}
          )
          .then(function(param) {
            _this.shoptypedata = param.data
          })
          .catch(function(err) {
            console.log(err);
          })
      },
      update() {
        var shopname = _this.$axios.post("/shop/checkname", {
          shopname: _this.shop.shopname
        });
        _this.$axios.all([shopname])
          .then(
            _this.$axios.spread(function(param) {
                if (param.data == "error" && _this.shoprold.shopname != _this.shop.shopname) {
                  alert("商品名不能重复");
                  _this.flag = false;
                }
                if (_this.flag) {
                  _this.$axios.post(
                      "/shop/update", {
                        "shopid":_this.shop.shopid,
                        "shopname": _this.shop.shopname,
                        "shopprice": _this.shop.shopprice,
                        "shoptypename": _this.shop.shoptypename,
                        "shopimg": _this.shop.shopimg,
                        "shopmessage": _this.shop.shopmessage,
                        "shoptypeid": _this.shop.shoptypeid
                      }
                    )
                    .then(function(param) {
                      location.reload() //刷新当前页面
                    })
                    .catch(function(err) {
                      console.log(err)
                    });

              }
              _this.shop.shopname = "",
              _this.shop.shopprice = "",
              _this.shop.shoptypid = "",
              _this.shop.shopimg = "",
              _this.shop.shopmessage = ""

              _this.shoprold.shopname = "",
              _this.shoprold.shopprice = "",
              _this.shoprold.shoptypename = "",
              _this.shoprold.shopimg = "",
              _this.shoprold.shopmessage = ""

              _this.dialogFormVisible = false;
              _this.flag=true;
            }
            )
           )
           .catch(function(error) {
           	console.log(error);
           })
      },
      handleEdit(row) {

        console.log(row);
        this.shop.shopid = row.shopid;
        this.shop.shopname = row.shopname;
        this.shop.shopprice = row.shopprice;
        this.shop.shoptypename = row.shoptype.shoptypename;
        this.shop.shopimg = row.shopimg;
        this.shop.shopmessage = row.shopmessage;

        this.shoprold.shopid = row.shopid;
        this.shoprold.shopname = row.shopname;
        this.shoprold.shopprice = row.shopprice;
        this.shoprold.shoptypename = row.shoptype.shoptypename;
        this.shoprold.shopimg = row.shopimg;
        this.shoprold.shopmessage = row.shopmessage;
        //   设置点击按钮之后进行显示对话框
        this.dialogFormVisible = true;
      },
      handleDelete(row) {
        console.log(row);
        _this.$axios.post(
          "/shop/delete",
          {
           "shopid":row.shopid
          }
        )
        .then(function(param){
          console.log(param.data);
          if(param.data=="ok"){
            alert("删除成功")
            location.reload() //刷新当前页面
          }

        })
        .catch(function(err){
        	console.log(err)
        })
      },
      showUp() {
        //   设置点击按钮之后进行显示对话框
        this.dialogFormVisible = true;
      },
      clear() {
        this.shop.shopname = "";
        this.shop.shopprice = "";
        this.shop.shoptypid = "";
        this.shop.shopimg = "";
        this.shop.shopmessage = "";
      }

    },
    data() {
      return {
        shoptypedata: [],
        dialogFormVisible: false,
        formLabelWidth: "100px",
        shop: {
          shopid: "",
          shopname: "",
          shopprice: "",
          shoptypename: "",
          shopimg: "",
          shopmessage: "",
          shoptypeid: ""
        },
        shoprold: {
          shopid: "",
          shopname: "",
          shopprice: "",
          shoptypename: "",
          shopimg: "",
          shopmessage: "",
          shoptypeid: ""
        },
        flag: true
      }
    },
    filters: {
      moneyFormat(num) {
        var num = (num || 0).toString(),
          temp = num.length % 3;
        switch (temp) {
          case 1:
            num = '00' + num;
            break;
          case 2:
            num = '0' + num;
            break;
        }
        return num.match(/\d{3}/g).join(',').replace(/^0+/, '');
      }
    }
  }
</script>

<style>
</style>
